{extend name="base" /}
<!-- page specific plugin styles -->
{block name="plugin-styles"}{/block}
<!-- inline styles related to this page -->
{block name="inline-styles"}{/block}
<!-- breadcrumb -->
{block name="breadcrumbs"}
<ul class="breadcrumb">
    <li>
        <i class="ace-icon fa fa-home home-icon"></i>
        <a href="{:url('Index/index')}">首页</a>
    </li>
    <li class="active">商品管理</li>
</ul>
<!-- /.breadcrumb -->
{/block}
<!-- PAGE CONTENT BEGINS -->
{block name="content"}
<div class="page-header">
    <h1>
        商品规格列表
    </h1>
</div>
<!-- /.page-header -->
<div class="clearfix tableTools-container">
    <form class='pull-left form-inline' id='form'>
	    <div class="form-group">
	         <div class="input-group">
	           <span class="input-group-addon">商品规格</span>
	            <select class="form-control input-sm" name="goods_spec_id" id="">
	               {foreach $goods_specs as $vo}
	                <option value="{$vo.id}" {eq name='$goods_spec_id' value='$vo.id'} selected {/eq}>{$vo.name}</option>
	               {/foreach}
	            </select>
	        </div>
	    </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">规格对应内容</span>
                <input type="text" class="form-control input-sm" name="name" placeholder="请输入规格对应内容">
            </div>
        </div>
	    <div class="form-group">
	        <div class="input-group">
	           <button type="button" class="btn btn-xs btn-primary" id='add'>新增</button>
	        </div>
	    </div>
    </form>
  </div>
  <br>  
  <div class='clearfix tableTools-container'>
    <form class='pull-left form-inline' >
        <div class="form-group">
             <div class="input-group">
               <span class="input-group-addon">商品规格</span>
                <select class="form-control input-sm"  id="goods_spec_id">
                 <option value="" >全部</option>
                   {foreach $goods_specs as $vo}
                    <option value="{$vo.id}" {eq name='$goods_spec_id' value='$vo.id'}selected {/eq}>{$vo.name}</option>
                   {/foreach}
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">规格对应内容</span>
                <input type="text" class="form-control input-sm" name='name' placeholder="请输入规格对应内容">
            </div>
        </div>
        <div class="form-group">
            <div class="input-group">
               <button type="button" class="btn btn-xs btn-primary" id='searchTable'>查询</button>
               <button type="reset" class="btn btn-xs btn-primary" >重置</button>
            </div>
        </div>
    </form>
 </div>

<div class="table-responsive">
    <table class="table table-bordered" id="DynamicTable"></table>
</div>
<!-- /.table-responsive -->
{/block}
<!-- PAGE CONTENT ENDS -->
<!-- page specific plugin scripts -->
{block name="plugin-scripts"}
<script src="/static/ace/assets/js/jquery.dataTables.min.js"></script>
<script src="/static/ace/assets/js/jquery.dataTables.bootstrap.min.js"></script>
{/block}
<!-- inline scripts related to this page -->
{block name="related-scripts"}
<script type="text/javascript">
        var myTable =
        $('#DynamicTable')
        .wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
        .DataTable({
            "autoWidth": false, //智能列宽处理
            "deferRender": true,    //延迟渲染以获得额外的初始化速度
            "info": true,   //表信息显示
            "lengthChange": false,  //更改每页记录数
            "ordering": false,  //排序功能
            "paging": true, //启用或禁用表分页
            "processing": false,    //处理指标
            // "scrollX": false,    //水平滚动
            // "scrollY": false,    //垂直滚动
            "searching": false, //搜索功能
            "serverSide": true, //服务器端处理模式
            "stateSave": false, //状态保存(页面重新加载时恢复表状态)
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Chinese.json"
            },
            "ajax": {
                "url": "/admin/goods/goods_spec_item_rs",
                "type": "POST",
                "data": function (d) {
                	 d.name = $("#name").val();
                     d.goods_spec_id = $("#goods_spec_id").val();
                },
                "dataSrc": function (json) {
                    return json.data;
                }
            },
            "columns": [{
                "title": "编号",
                "data": "id"
            },{
                "title": "商品类型",
                "data": "goods_type_name"
            },{
                "title": "规格名称",
                "data": "goods_spec_name"
            }, {
                "title": "规格值",
                "data": "item"
            }, {
                "title": "操作",
                "data": "id"
            }],
            "columnDefs": [{
                "className": "text-center",
                "targets": [0,1,2,3,4]
            },{
                "render": function (data, type, row, meta) {
                    return '<input type="text" size="30" value='+data+' name="name" onchange="addOrUpdate(this,'+row.id+')">';
                },
                "targets": 3
            },{
                "render": function (data, type, row, meta) {
                	return '<div class="btn-group">\
                              <a href="#" class="btn btn-xs btn-danger" data-rel="tooltip" title="删除" onclick="del('+data+')">删除</a>\
                           </div>';
                },
                "targets": 4
            }],
            "initComplete": function( settings, json ) {
                $("#DynamicTable").prev(".row").remove();
                //add tooltip for small view
                $('[data-rel="tooltip"]').tooltip();
            }
        });
        
        $("#searchTable").click(function () {
            myTable.draw();
        });
        
        
        $("#add").click(function(event) {
            var options={
                url:"/admin/goods/goods_spec_item_add_or_update",
                type:"POST",
                dataType:"json",
                data: {
                    name : $("input[name=name]").val(),
                    goods_spec_id : $("input[name=goods_spec_id]").val(),
                },
                success: function(json){

                    if(json.returnCode==1){
                        alert(json.returnMsg);
                        window.location='';
                    }else{
                        alert(json.returnMsg);
                    }
                }
            };
            $("#form").ajaxSubmit(options)
        });

        function addOrUpdate(_ele,_id){
            var value = $(_ele).val()
            $.ajax({
                url: '/admin/goods/goods_spec_item_add_or_update',
                type: 'POST',
                dataType: 'json',
                data: {id: _id,name:value},
            })
            .done(function(json) {
                console.log("success");
                if(json.returnCode==1){
                    alert(json.returnMsg);
                    myTable.draw();
                }else{
                    alert(json.returnMsg);
                }
            })
        }
        function del(_id) {
            // body...
            
            var msg = "您真的确定要删除吗？\n\n请确认！"; 
            if (confirm(msg)!=true){ 
             return false; 
            } 
            $.ajax({
                url: '/admin/goods/del_goods_spec_item',
                type: 'POST',
                dataType: 'json',
                data: {id: _id},
            })
            .done(function(json) {
                console.log("success");
                if(json.returnCode==1){
                    alert('删除成功');
                    myTable.draw();
                }else{
                    alert(json.returnMsg);
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
            
        }
        
</script>
{/block}